<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Hello World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>

<body>
    <h1>solt 内置组件</h1>
    <h3>这个不清楚</h3>  
    <a href="../index.html">返回</a>
    
    <hr/>
    <div id="app">
        {{num}}
        <button @click="add">加1</button>

        <user>
                <span slot="url">{{jsdata.url}}</span>    
                <span slot="netname">{{jsdata.netname}}</span>    
                <span slot="skill">{{jsdata.skill}}</span>    
        </user>
      
     
    </div>
    <template id="user">
            <div>
                    <p>网名:<slot name="url"></slot></p>
                    <p>网址:<slot name="netname"></slot></p>
                    <p>技术：<slot name="skill"></slot></p>
            </div>
        </template>
    <script>

        var user = {
            template:`#user`,
        }

        var app = new Vue({
            el: "#app",
            data: {
                num:10,
                jsdata:{
                    url:"http://lyyblog.cn",
                    netname:"Liyy",
                    skill:"NET,VUE"
                }
            },
            methods:{
                add:function(){
                    this.num++;
                }
            },
            components:{
                "user":user
            }            
        });
       
    </script>
</body>

</html>